<template>
	<view class="news">
		<ul class="news_list">
			<li class="news_item" v-for="(item, index) in navList" :key="item.id" :class="currentNav == index? 'isShowNav':'' "
			 @click="getArticleList(item.id, index)">{{item.name}}</li>
		</ul>
		<!-- 轮播图 -->
		<view class="swiper">
			<mosowe-swiper :lists="imgList" :touchable="false" indicator="dots" imageKey="image" previewImage pyramid
			 pyramidMargin="90rpx" />
		</view>
		<!-- 列表区 -->
		<scroll-view scroll-y class="deta_list">
			<li class="deta_items" v-for="item in articleList" :key="item.id" @click="gotoInfoDetails(item)">
				<view>
					<p>{{item.post_title}} | {{item.post_excerpt}}</p>
					<span>试油井</span>
					<span>{{item.create_time}}</span>
				</view>
				<image :src="item.imgurl" mode=""></image>
			</li>
		</scroll-view>
	</view>
</template>

<script>
	import mosoweSwiper from '../../components/mosowe-swiper/mosowe-swiper.vue'
	import {
		throtTling
	} from '../../utils/throttling.js'
	export default {
		components: {
			mosoweSwiper
		},
		data() {
			return {
				// 当前高亮
				currentNav: 0,
				navList: [],
				// 轮播图
				imgList: [],
				articleList: '',
				// 当前id
				currentId: ''
			};
		},
		mounted() {
			this.getArticleCategory()
			this.getSlidelist()
		},
		methods: {
			getArticleCategory() {
				let that = this
				this.$http({
					url: '/wxapi/ArticleApi/GetArticleCategory',
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.navList = res.data
						that.currentId = that.navList[0].id
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getArticleList: throtTling(function(id, index) {
				let that = this
				that.currentNav = index
				this.$http({
					url: '/wxapi/ArticleApi/ArticleList',
					data: {
						category_id: id,
						page: 1
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.articleList = res.data
					}
				})
			}, 1000), 
			// 轮播图
			getSlidelist() {
				let that = this
				that.$http({
					url: '/wxapi/slide_api/slidelist',
					data: {
						type: 2
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.imgList = res.data
					}
				})
			},
			// 前往资讯详情页
			gotoInfoDetails(data) {
				uni.navigateTo({
					url: `/pages/infoDetails/infoDetails?id=${data.id}`
				})
			}
		},
		watch: {
			currentId(val) {
				this.getArticleList(val)
			},
			// 修复资讯页面默认不高亮的bug
			currentNav(val = 0){
				this.currentNav = val
			}
		}
	}
</script>

<style lang="less">
	.news {
		margin-bottom: 100rpx;
		.news_list {
			display: flex;
			justify-content: space-around;
			height: 100rpx;
			line-height: 100rpx;

			.news_item {
				color: #333;
				font-size: 30rpx;
			}
		}

		.swiper {
			height: 300rpx;
		}

		.deta_list {
			margin: 0 30rpx;
			width: calc(100vw - 60rpx);
			height: calc(100vh - 600rpx);
			.deta_items {
				display: flex;
				padding: 30rpx 0;
				height: 183rpx;
				border-bottom: 1rpx solid #EDEDED;

				view {
					padding-top: 20rpx;
					margin-right: 48rpx;
					flex: 1;
					background-color: #fff;

					p {
						margin-bottom: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-size: 24rpx;
						color: #333;
						line-height: 40rpx;
					}

					span {
						margin: 0 20rpx;
					}
				}

				image {
					width: 218rpx;
					height: 100%;
					border-radius: 14rpx;
				}
			}
		}

		// 是否高亮
		.isShowNav {
			border-bottom: 4rpx solid #2596ff;
		}
	}
</style>
